<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.keywords" placeholder="关键字/id/题目标题" style="width: 200px;" class="filter-item"
        @keyup.enter.native="handleFilter" />

      <el-select v-model="listQuery.cate_id" placeholder="分类选择" clearable style="width: 150px" class="filter-item">
        <el-option v-for="(item, index) in cate" :key="index" :label="item.name" :value="item.id" />
      </el-select>
      <el-select v-model="listQuery.type" placeholder="类型选择" clearable style="width: 150px" class="filter-item">
        <el-option v-for="(item, index) in type" :key="index" :label="item" :value="index" />
      </el-select>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="getList">搜索</el-button>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-plus" @click="add">添加新题目</el-button>
    </div>
    <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%;">
      <el-table-column label="ID" prop="id" sortable="custom" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="题目内容" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.content }}</span>
        </template>
      </el-table-column>
      <el-table-column label="所属分类" align="center">
        <template slot-scope="scope">
          <span>{{ cateA[scope.row.cate_id] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="题目类型" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.type ==1">结构化</span>
          <span v-else>无领导</span>
        </template>
      </el-table-column>
      <el-table-column label="答案数量" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.number_comment }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收藏数量" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.number_collect }}</span>
        </template>
      </el-table-column>
      <el-table-column label="添加日期" align="center">
        <template slot-scope="{ row }">
          {{ _date(row.create_time) }}
        </template>
      </el-table-column>
      <el-table-column label="最新答案时间" align="center">
        <template slot-scope="{ row }">
          {{ _date(row.update_time) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300" align="center">
        <template slot-scope="scope">
          <div>
            <span v-permission="['/library/topicEdit']">
              <el-button size="small" type="primary" @click="edit(scope.row)">修 改</el-button>
              <el-button size="small" type="primary" @click="del(scope.row)">删 除</el-button>
              <el-button size="small" type="primary" @click="answer_list(scope.row)">答 案</el-button>
            </span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <el-dialog :title="title" :visible.sync="show">
      <el-form>
        <el-form-item label="题目内容" label-width="150px">
          <el-input type="textarea" :rows="2" v-model="item.content" />
        </el-form-item>
        <el-form-item label="题目所属分类" label-width="150px">
          <el-select v-model="item.cate_id" placeholder="题目分类" clearable style="width: 150px" class="filter-item">
            <el-option v-for="(item, index) in cate" :key="index" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="题目所属分类" label-width="150px">
          <el-select v-model="item.type" placeholder="题目类型" clearable style="width: 150px" class="filter-item">
            <el-option v-for="(item, index) in type" :key="index" :label="item" :value="index" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handle()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    topicList,
    topicDel,
    topicEdit,
    cateList
  } from '@/api/interview';
  import {
    addressList
  } from '@/api/config';
  import waves from '@/directive/waves';
  import Pagination from '@/components/Pagination';
  import permission from '@/directive/permission/index.js';
  import {
    dateHandle
  } from '@/api/dateHandle';
  import imageUpload from '@/components/Upload/image';

  export default {
    components: {
      Pagination,
      imageUpload
    },
    directives: {
      waves,
      permission,

    },
    data() {
      return {
        tableKey: 0,
        list: null,
        total: 0,
        listLoading: true,
        listQuery: {
          page: 1,
          cate_id: null,
          limit: 20,
          library_id: null,
        },
        type: {
          1: '结构化',
          2: '无领导'
        },
        item: {},
        cate: {},
        cateA: [],
        show: false,
        title: '添加题目',

      };
    },
    created() {
      this.getList()
      this.getCate()
    },
    methods: {
      _date(t) {
        return dateHandle('Y-m-d H:i:s', t)
      },
      answer_list(item) {
        this.$router.push({
          name: 'interview/answerList',
          params: {
            id: item.id,
            title: item.content
          }
        })
      },
      handle() {
        topicEdit(this.item).then(res => {
          if (res.code == 20000) {
            this.$message({
              type: 'success',
              message: res.msg
            });
            this.show = false;
            this.getList()
          }
        })
      },
      edit(item) {
        this.show = true
        this.item = item
        this.title = '编辑题目'
      },
      add() {
        this.show = true
        this.item = {
          library_id: this.listQuery.library_id ? this.listQuery.library_id : 0
        }
        this.title = '添加题目'
      },
      del(item) {
        this.$confirm('确认删除该题目?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          topicDel({
            id: item.id
          }).then(res => {
            if (res.code == 20000) {
              this.$message({
                type: 'success',
                message: res.msg
              });
              this.show = false;
              this.getList()
            }
          })
        }).catch(() => {})
      },

      getCate() {
        cateList().then(res => {
          this.cate = res.data
          res.data.forEach(res => {
            this.cateA[res.id] = res.name
          })
          console.log(this.cateA);
        })
      },
      getList() {
        this.listLoading = true;
        topicList(this.listQuery).then(res => {
          this.list = res.data.data;
          this.total = res.data.total;
          setTimeout(() => {
            this.listLoading = false;
          }, 0.3 * 1000);
        });
      },

    }
  };
</script>
